<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li{
            cursor: pointer;
        }
        .liStyle{
            color: red;
            text-decoration: line-through;
        }
        .btnTrue{
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>todulist_组件化写法</h2>
        <header-cpn @add="listAdd"></header-cpn>
        <ul>
            <li 
                v-for="(item,index) in list" 
                :key="index" 
                @click="changeStatus(index)" 
                :class="item.status ? 'liStyle' : '' "
                v-show="btnStatus === 'all' ? true : btnStatus === 'finished' ? item.status : !item.status "
                >
                {{ item.name }}
            </li>
        </ul>
        <footer-cpn @changebtn="changeshow"></footer-cpn>
    </div>


    <script src="../js/vue.js"></script>
    <template id="header">
        <div>
            <label for="">
                <input type="text" v-model="inputData">
            </label>
            <button @click="add">添加</button>
        </div>
    </template>
    <template id="footer">
        <div>
            <button 
                v-for="(item,index) in btnList" 
                :class="item.status ? 'btnTrue' : '' "
                @click="changeBtn(index)"
                >
                {{ item.name }}
            </button>
        </div>
    </template>
    <script>
        const app = new Vue({
            el:'#app',
            data(){
                return {
                    list:[
                        {
                            name:'吃饭',
                            status:false,
                        },
                        {
                            name:'睡觉',
                            status:false,
                        },
                        {
                            name:'打豆豆',
                            status:false,
                        },
                    ],
                    btnStatus:'all' //all-全部 finished-已完成 unfinished-未完成
                }
            },
            methods:{
                listAdd(val){
                    this.list.push({
                        name:val,
                        status:false
                    })
                },
                changeStatus(i){
                    this.list[i].status = !this.list[i].status
                },
                changeshow(val){
                    this.btnStatus = val
                }
            },
            components:{
                'header-cpn':{
                    template:'#header',
                    data(){
                        return {
                            inputData:''
                        }
                    },
                    methods:{
                        add(){
                            if(this.inputData.length > 0){
                                this.$emit('add',this.inputData)
                            }
                        }
                    }
                },
                'footer-cpn':{
                    template:'#footer',
                    data(){
                        return {
                            btnList:[
                                {
                                    name:'全部',
                                    status:true
                                },
                                {
                                    name:'已完成',
                                    status:false
                                },
                                {
                                    name:'未完成',
                                    status:false
                                },
                            ]
                        }
                    },
                    methods:{
                        changeBtn(i){
                            this.btnList.map(item => item.status = false)
                            this.btnList[i].status = true
                            let btnStatus = null
                            if(i === 0){
                                btnStatus = 'all'
                            }else if(i === 1){
                                btnStatus = 'finished'
                            }else{
                                btnStatus = 'unfinished'
                            }
                            this.$emit('changebtn',btnStatus)
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>